import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import { Trans,t } from "@lingui/macro"
import { Button, Row, Col, DatePicker, Form, Input, Cascader, Select,TreeSelect ,message } from 'antd'
import FilterForm from '../../../components/FilterForm';
import {addRootNode} from "../../../utils/tree";
import apis from "../../../services/index";

const { Search } = Input
const { RangePicker } = DatePicker

class Filter extends Component {
  formRef = React.createRef()

  handleFields = fields => {
    const { betweenCreatedTime } = fields
    if (betweenCreatedTime && betweenCreatedTime.length) {
      fields.betweenCreatedTime = [
        moment(betweenCreatedTime[0]).format('YYYY-MM-DD'),
        moment(betweenCreatedTime[1]).format('YYYY-MM-DD'),
      ]
    }
    return fields
  }

  handleSubmit = () => {
    const { onFilterChange } = this.props
    const values = this.formRef.current.getFieldsValue()
    const fields = this.handleFields(values)
    onFilterChange(fields)
  }


  render() {
    const { onAdd, filter, options,optionValueLabel, trees } = this.props

    let initFilterData = {}
    let initialCreateTime = []
    if (filter['betweenCreatedTime[0]']) {
      initialCreateTime[0] = moment(filter['betweenCreatedTime[0]'])
    }
    if (filter['betweenCreatedTime[1]']) {
      initialCreateTime[1] = moment(filter['betweenCreatedTime[1]'])
    }
    if(filter['status']) {
      initFilterData['status'] = parseInt(filter['status'])
    }

    const actions = [
    ]

    return (
      <FilterForm onAdd={onAdd} actions={actions} onSubmit={this.handleSubmit} ref={this.formRef} initialValues={{ ...filter, betweenCreatedTime: initialCreateTime, ...initFilterData }}>
            <Form.Item name="jobId">
              <Search
                placeholder={t`Job Id`}
                onSearch={this.handleSubmit}
              />
            </Form.Item>
            <Form.Item name="status">
           <Select
             showSearch
             placeholder={t`Status`}
             optionFilterProp="children"
             options={optionValueLabel.status}
             />
            </Form.Item>
      </FilterForm>
    )
  }
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Filter
